<template>
    <div style="width:auto ;">
        <el-row>
            <el-col :span="8" style="width:180px; ">
                <el-card shadow="hover" :body-style="{ padding: '0px', height: '290px'} ">
                    <img :src=url class="image" style="width:178px;height: 178px" @click="goAbout(index,data_name)">
                    <div style="padding: 14px;">
                        <span style="color: red">¥{{price}}</span>
                        <p v-if="free_shipping==1"
                           style="background-color: red ;color: white; float:left; font-size:1px">包邮</p>


                        <p style="font-size:1px;height:30px; ">{{title | ellipsis}}</p>
                        <div style="height:10px;width: 150px">
                            <p style="font-size:1px;height:20px; float: right;color: #888;">{{payment |
                                ellipsis}}人付款</p>
                        </div>


                        <div class="bottom clearfix">
                            <a style="  float:left; font-size:12px; text-decoration:underline"> {{ShopName}}</a>

                            <el-button type="text" class="button" style="height: 1px;float: right;"

                                       @click="inputShopCard(index)"
                                       v-if="!is_admin"
                            >
                                放入<i class="el-icon-shopping-cart-2"></i></el-button>
                            <el-button type="text" class="button" style="height: 1px;float: right;"

                                       @click="delCommodity(index)"
                                       v-else="!is_admin"
                            >
                                删除商品<i class="el-icon-shopping-cart-2"></i></el-button>
                        </div>
                    </div>
                </el-card>
            </el-col>
        </el-row>



    </div>
</template>

<script>
    import {mapState} from 'vuex'

    export default {
        data() {
            return {
                url: "",

            }
        },
        name: 'ShopCard',
        props: {
            ShopName: String,
            free_shipping: String,
            id: String,
            payment: String,
            photo: String,
            price: String,
            title: String,
            index: Number,
            data_name:String,

        },
        created() {
            this.url = "http://www.qjhyuki.top/vuehomeword/VueShop/image/" + this.photo


        },
        filters: {
            ellipsis(value) {
                if (!value) return ''
                if (value.length > 28) {
                    return value.slice(0, 28) + '...'
                }
                return value
            },
        },
        methods: {
            inputShopCard(index) {
                this.$notify({
                    title: '成功',
                    message: '成功加入购物车',
                    iconClass: 'el-icon-shopping-cart-full',
                    duration: 1000
                });


                this.$store.commit('addShopping',this.CommodityData[index])

            },
            delCommodity(index){

                this.$notify({
                    title: '提示',
                    message: '后端暂未实现该功能',
                    type: "warning",
                    duration: 1000
                });

                this.$store.commit("delCommodity", {index})
            },
            goAbout:function(id,data_name){

                this.$router.push({
                    path:`/about/${id}/${data_name}`
                });

            },

        },
        computed: {
            ...mapState(['CommodityData']),
            ...mapState(['is_admin'])
        },

    }
</script>

<style>
    .time {
        font-size: 13px;
        color: #999;
    }

    .bottom {
        margin-top: 13px;
        line-height: 12px;
    }

    .button {
        padding: 0;
        float: right;
    }

    .image {
        width: 100%;
        display: block;
    }

    .clearfix:before,
    .clearfix:after {
        display: table;
        content: "";
    }

    .clearfix:after {
        clear: both
    }
    .image{
        color: #19d3ea;
        font-size: 18px;
        cursor: pointer;  /*鼠标悬停变小手*/

    }
</style>